<template>
	<view :style="inspectionTheme">
		<view class="foot-card">
			<block v-if="!closeBtn">
				<view class="confirem-botton" :class="{ 'disabled': !props.disabled }" @click="handleConfirm">
					{{props.confirmText}}
				</view>
			</block>
			<block v-else>
				<view class="bottn-body">
					<view class="cancelBotton" @click="handleCancel">
						{{props.cancelText}}
					</view>
					<view class="confiremBotton" @click="handleConfirm">
						{{props.confirmText}}
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		defineEmits,
		computed,
		watch
	} from 'vue';
	import {
		checkNotEmpty
	} from '@/utils/utils.js'
	import {
		useStore
	} from 'vuex'
import { config } from '../../utils/config';
	const store = useStore()
	const inspectionTheme = computed(() => store.state.user.inspectionTheme)
	const props = defineProps({
		confirmText: {
			type: String,
			default: ''
		},
		cancelText: {
			type: String,
			default: ''
		},
		closeBtn: {
			type: Boolean,
			default: false
		},
		disabled: {
			type: Boolean,
			default: true
		}
	});
	const emit = defineEmits(['confirm', 'cancel']);

	const handleConfirm = () => {
		if (!props.disabled) return;
		emit('confirm');
	};
	const handleCancel = () => {
		emit('cancel');
	};

</script>

<style lang="scss" scoped>
	.foot-card {
		width: 100%;
		background: #ffffff;
		box-shadow: 0rpx -5rpx 10rpx 0rpx rgba(215, 215, 215, 0.302);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;

		.disabled {
			background: #E2E3E5 !important;
			cursor: not-allowed;
			color: #C5C8CB !important;
			/* 鼠标显示禁用图标 */
			pointer-events: none;
			/* 阻止所有鼠标事件（点击、悬停等） */
		}

		.confirem-botton {
			width: 600rpx;
			height: 90rpx;
			background: var(--primary-color);
			border-radius: 10rpx;
			margin: 20rpx auto 65rpx;
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 90rpx;
			text-align: center;
		}

		.bottn-body {
			display: flex;
			align-items: center;
			margin: 20rpx 0 65rpx;
			justify-content: space-around;

			.confiremBotton {
				width: 300rpx;
				height: 90rpx;
				background: var(--primary-color);
				border-radius: 10rpx;
				font-weight: 600;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 90rpx;
				text-align: center;
			}

			.cancelBotton {
				width: 300rpx;
				height: 90rpx;
				background: #F0F2F5;
				border-radius: 10rpx;
				font-weight: 600;
				font-size: 36rpx;
				color: #000000;
				line-height: 90rpx;
				text-align: center;
			}
		}
	}
</style>